import React, {useEffect, useState} from "react";
import {
    addMarketAccount,
    CreateMarketAccountRequest,
    deleteMarketAccount,
    getMarketAccountsByMarketId,
    MarketAccountResponse
} from "../../apis/MarketAccountApi";
import {Button, DatePicker, Divider, Form, Space, Tabs} from "antd";
import ArrayUtils from "@zxy-cn/array-utils";
import employeeAuthorizationStore from "../../store/EmployeeAuthorizationStore";
import {PlusOutlined} from "@ant-design/icons";
import FormDrawer from "../FormDrawer";
import MarketAccountTabItemPage, {buildEditMarketAccountFormItems} from "../MarketAccountTabItemPage";
import DataPageLayout from "../DataPageLayout";

const MarketAccountTabPage = (({id}: { id: number }) => {
    const [marketAccounts, setMarketAccounts] = useState<MarketAccountResponse[]>([])

    useEffect(() => {
        getMarketAccountsByMarketId(id).then(response => {
            setMarketAccounts(response.data)
        })
    }, [id]);

    const [openAddMarketAccountDrawer, setOpenAddMarketAccountDrawer] = useState(false)
    // const now = LocalDate.now()
    // const [year, setYear] = useState(now.year())
    // const [month, setMonth] = useState(now.monthValue()-1)

    return <>
        <DataPageLayout leftActions={<Space>
            {/*<DatePicker.MonthPicker value={Dayjs().year(year).month(month-1)} onChange={date => {*/}
            {/*    setYear(date.year())*/}
            {/*    setMonth(date.month()+1)*/}
            {/*}}/>*/}
        </Space>}
                        rightActions={<Space>
                            {employeeAuthorizationStore.hasAuthority("卖场_户头_新增")
                                && <Button onClick={() => {
                                    setOpenAddMarketAccountDrawer(true)
                                }}>添加户头</Button>}</Space>}>
            {marketAccounts.length &&
                <Tabs type={"editable-card"} tabPosition={"left"} items={marketAccounts.map((it, index) => ({
                    label: it.name,
                    key: it.id.toString(),
                    children: <MarketAccountTabItemPage data={it} marketId={id} onChange={data => {
                        let list = Array.from(marketAccounts);
                        list[index] = data
                        setMarketAccounts(list)
                    }}/>
                }))} onEdit={(key, action) => {
                    if (action === "add") {
                        setOpenAddMarketAccountDrawer(true)
                    } else {
                        deleteMarketAccount(id, parseInt(key as string)).then(() => {
                            let list = Array.from(marketAccounts);
                            ArrayUtils.removeBy(list, value => value.id.toString() === key)
                            setMarketAccounts(list)
                        })
                    }
                }} hideAdd={!employeeAuthorizationStore.hasAuthority("卖场_户头_新增")}
                      addIcon={<><PlusOutlined/>添加户头</>}/>}
        </DataPageLayout>
        <FormDrawer<CreateMarketAccountRequest> open={openAddMarketAccountDrawer} title={"新增户头"}
                                                onClose={() => setOpenAddMarketAccountDrawer(false)}
                                                onConfirm={async values => {
                                                    let response = await addMarketAccount(id, values);
                                                    let accountId = response.data;
                                                    let list = Array.from(marketAccounts);
                                                    list.push({id: accountId, name: values.name})
                                                    setMarketAccounts(list)
                                                    setOpenAddMarketAccountDrawer(false)
                                                }}>
            {buildEditMarketAccountFormItems()}
        </FormDrawer>


    </>
})

export default (MarketAccountTabPage)